<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title><tiles:insertAttribute name="title" ignore="true"/></title>
<script src="${pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/dataTables.bootstrap.css">
<link  rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/front_style.css" />
<script type="text/javascript" charset="utf8" src="${pageContext.request.contextPath}/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="${pageContext.request.contextPath}/js/dataTables.bootstrap.js"></script>
  
<script type="text/javascript">
	$(function(){
		var activePage = "${ACTIVE_PAGE}";
		$("#"+activePage).attr("class", "active");
		$("#"+activePage).find("a").attr("class", "active");
		
		$.alert = function(content){
			$("#modalAlertContent").text(content);
			$("#modalAlert").modal("show");
		};
	});
</script>
</head>

<body>
	<!------------------- Header ------------------>
	<header>
		<tiles:insertAttribute name="header"/>
	</header>
    <!--------------------------------------------->
    
    <!-------------------- body ------------------->
    <div class="container-box">
	    <div class="navigation">
		    <ul>
		    	<c:forEach items="${activemenus}" var="x" varStatus="i">
		    		<!--<c:set var="clazz" value=""/>
			    	<li id="home"><a href="${pageContext.request.contextPath}"><span class="glyphicon glyphicon-home"></span> หน้าแรก</a></li>
		    		<c:if test="${x.nameEn eq 'home' and x.isActive eq 'Y'}">
		    			<c:set var="clazz" value="glyphicon glyphicon-modal-window"/>
			        	<li id="programs"><a href="${pageContext.request.contextPath}/programs"><span class="glyphicon glyphicon-modal-window"></span> ${x.nameTh}</a></li>
			        </c:if>
		    		<c:if test="${x.nameEn eq 'programs' and x.isActive eq 'Y'}">
		    			<c:set var="clazz" value=""/>
			        	<li id="programs"><a href="${pageContext.request.contextPath}/programs"><span class="glyphicon glyphicon-modal-window"></span> ${x.nameTh}</a></li>
			        </c:if>
		    		<c:if test="${x.nameEn eq 'news' and x.isActive eq 'Y'}">
			        	<li id="news"><a href="${pageContext.request.contextPath}/news"><span class="glyphicon glyphicon-list-alt"></span> ${x.nameTh}</a></li>
			        </c:if>
		    		<c:if test="${x.nameEn eq 'webboard' and x.isActive eq 'Y'}">
			        	<li id="webboard"><a href="${pageContext.request.contextPath}/webboard"><span class="glyphicon glyphicon-th-list"></span> ${x.nameTh}</a></li> 
			        </c:if>
		    		<c:if test="${x.nameEn eq 'download' and x.isActive eq 'Y'}">
			        	<li id="download"><a href="${pageContext.request.contextPath}/download"><span class="glyphicon glyphicon-download-alt"></span> ${x.nameTh}</a></li>
			        </c:if>
		    		<c:if test="${x.nameEn eq 'programs' and x.isActive eq 'Y'}">
			        	<li id="programs"><a href="${x.linkURL}" id="btnFintrack"><span class="glyphicon glyphicon-modal-window"></span> ${x.nameTh}</a></li>
			        </c:if>
		        <li id="contactUs"><a href="${pageContext.request.contextPath}/contactus"><span class="glyphicon glyphicon-earphone"></span> ติดต่อเรา</a></li>
		    		<c:if test="${x.nameEn eq 'websites' and x.isActive eq 'Y'}">
		    			<c:set var="clazz" value="glyphicon glyphicon-link"/>
			        </c:if>-->
			        <c:choose>
			        	<c:when test="${x.nameEn eq 'fintrack'}">
			        		<li><a href="${x.linkURL}" target="_blank"><span class="glyphicon glyphicon-modal-window"></span> ${x.nameTh}</a></li>
			        	</c:when>
			        	<c:otherwise>
			        		<li id="${x.nameEn}"><a href="${pageContext.request.contextPath}/${x.linkURL}"><span class="${x.classUI}"></span> ${x.nameTh}</a></li>
			        	</c:otherwise>
			        </c:choose>
		        </c:forEach>
		    </ul>
		</div>
		<tiles:insertAttribute name="body"/>
        <div>
            &nbsp;
        </div>
	</div>
	
    <!-------------------- footer ------------------->
    <div>
		<tiles:insertAttribute name="footer"/>
    </div>
    
    
<div class="modal fade" id="modalAlert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title glyphicon glyphicon-warning-sign" id="modalAlertTitle"></h4>
			</div>
			<div class="modal-body" id="modalAlertContent">
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">ปิด</button>
			</div>
		</div>
	</div>
</div>
</body>
</html>